<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选中页面中所有的标签 */
    * {
      color: red;
    }

    /* 选择带有clr字符串的元素 */
    /* [class*="clr"] {
      width: 60%;
      background: red;
      color: white;
    } */

    /* 选择以clr开头的元素 */
    /* [class^="clr"] {
      width: 60%;
      background: red;
      color: white;
    } */

    /* 选择以clr结尾的元素 */
    [class$="clr"] {
      width: 60%;
      background: red;
      color: white;
    }

    li {
      width: 100%;
      background: black;
      color: white;
    }

    ul.list {
      list-style-type: circle;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <p>到十冇</p>
  <h1>她时知。</h1>
  <span>一一后。</span>

  <ul class="list">
    <li class="clr-red">red</li>
    <li class="gr">green</li>
    <li class="clr-blue">blue</li>
    <li class="clr-pink">pink</li>
    <li class="yellow-clr">yellow</li>
  </ul>

</body>

</html>